<template>
  <el-popover
    class="box-item"
    width="350"
    trigger="hover"
    :placement="descriptionPlacement"
  >
    <el-descriptions title="报文信息" size="mini" border :column="2">
      <el-descriptions-item v-for="item in descriptionList" :key="item.key">
        <span slot="label">{{ item.key }}</span>
        <span>{{ item.value }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <div class="arrow-container" slot="reference" :style="arrowStyle">
      <svg class="arrow" :class="{ flashing }" viewBox="0 0 100 100">
        <path :stroke="arrowColor" class="arrow-line" d="M10,50 L90,50" />
        <polygon
          :fill="arrowColor"
          class="arrow-head"
          points="90,50 80,45 80,55"
        />
      </svg>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: "Arrow",
  props: {
    rotation: {
      type: Number,
      default: 0,
    },
    color: {
      type: String,
      default: "black",
    },
    // 正在传输时播放动画
    flashing: {
      type: Boolean,
      default: false,
    },
    // 接受 json
    description: {
      type: String,
      default: '{"text": ""}',
    },
    descriptionPlacement: {
      type: String,
      default: "top",
    },
  },
  data() {
    return {
      arrowColor: this.color, // 默认箭头颜色为红色
    };
  },
  computed: {
    arrowStyle() {
      return {
        transform: `rotate(${this.rotation}deg)`,
        stroke: this.color,
        fill: this.color,
      };
    },
    descriptionList() {
      try {
        const data = JSON.parse(this.description || "{}");
        return Object.keys(data).map((k) => {
          return {
            key: k,
            value: data[k],
          };
        });
      } catch (e) {
        console.log("解析 JSON 失败：", e);
        return [];
      }
    },
  },
};
</script>

<style scoped lang="less">
.arrow-container {
  display: inline-block;
  width: 80px;
  height: 80px;
  transform-origin: center center;
}

.arrow {
  width: 100%;
  height: 100%;
}

.arrow-line {
  stroke-width: 2;
}

.arrow-head {
}

.no-wrap {
  white-space: nowrap;
}

.flashing {
  animation: flashing 1s infinite;
}

@keyframes flashing {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
</style>
